<template>
	<view class="container">

	<view class="header">
			<view class="header-b">
				<view @tap="$back()"><image src="../../static/stock/left.png" mode=""></image></view>
				<view class="">库存预警</view>
	<view class="">
		
	</view>
			</view>
		</view>
		<view class="seach">
			<view class="seach-s">
				<image src="../../static/images/tb_search.png" mode=""></image>
				<input type="text" value="" placeholder="请输入关键词..." v-model="seach" />
			</view>
					<image src="../../static/stock/1.png" mode="" style="width:44rpx;height: 44rpx;" @click="scan"></image>
		</view>
		<view class="classify">
			<view class="classify-l" @click="showdow">
				{{ msg }}
				<image src="../../static/images/arrow_down.png" mode=""></image>
			</view>
			<view class="classify-l" @click="showO">
				{{ mst }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
			<view class="classify-l" @click="showTT">
				{{ msy }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
		</view>
		<!-- 下拉 -->
	<!-- 下拉 -->
	<view v-show="show" class="combobox">
		<view class="show-li" @click="showtrue(-1)">全部分类</view>
		<view class="show-li" @click="showtrue(index, item)" v-for="(item, index) in leiNmae" :key="item.category_id">{{ item.name }}</view>
	</view>
	
	<!-- 下拉 -->
	<view v-show="showone" class="combobox">
		<view class="show-li" @click="showOO(0)">全部货品</view>
		<view class="show-li" @click="showOO(1)">低于安全库存</view>
		<view class="show-li" @click="showOO(2)">高于安全库存</view>
	</view>
	<!-- 下拉 -->
	<view v-show="showtwo" class="combobox">
		<view class="show-li" @click="showt(0)">智能排序</view>
		<view class="show-li" @click="showt(1)">上架时间(最近)</view>
		<view class="show-li" @click="showt(2)">上架时间(最早)</view>
		<view class="show-li" @click="showt(3)">更新时间(最近)</view>
		<view class="show-li" @click="showt(4)">更新时间(最早)</view>
		<!-- 	<view class="show-li" @click="showt(5)">销售从高到低</view>
		<view class="show-li" @click="showt(6)">销售从低到高</view>
		<view class="show-li" @click="showt(7)">库存从高到低</view>
		<view class="show-li" @click="showt(8)">库存从低到高</view> -->
	</view>
		<view class="ima" v-if="shop"><image src="../../static/slice/86438f8f6d0029f503d57efb448590f.png" mode="aspectFit"></image></view>
	
		<view class="stockList" v-for="item in arry">
			<view class="stock-item">
				<view class="title f30 c666 red">
					<view class="name">安全库存{{item.min_stock_warn_num}}-{{item.max_stock_warn_num}}</view>
					<view class="text">{{kk(item)}}</view>
				</view>

				<view class="box">
					<view class="pic">
						<dimg :src="item.cover"></dimg>
					</view>
					<view class="text">
						<view class="name f30 c333">{{item.title}}</view>
						<view class="stock f28 c666">库存：{{xiao(item)}}</view>
						<view class="number f28 c666">销量：{{sele(item)}}</view>
						<view class="coding f28 c666">货品编码：{{item.goods_no}}</view>
					</view>
				</view>

			</view>
			

			</view>

		</view>



	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons
	},

	data() {
		return {
			seach:'',
				showtwo: false,
			showone: false,
			show: false,
			msy: '智能排序',
			mst: '全部',
			msg: '全部分类',
			showtru: true,
			shop: false,
			showZhan: '展开',
			showZhanimage: '../../static/images/tb_down.png',
			unfolt: false ,//展开按钮,
			showPut:false,
			arry:'',
			addy: '',
			// 分类名字
			leiNmae: {},
		};
	},
	onLoad() {
		this.showAll()
		this.fenlei()
	},
	watch: {
		seach(newValue, oldValue) {
			this.arry = this.addy;
			this.seach = newValue;
			this.arry = this.arry.filter(item => {
				return item.title.indexOf(this.seach) != -1;
			});
		}
	},
	methods: {
		fenlei() {
			this.$ajax('api/v1.goods/categoryList', {}, 'GET').then(res => {
				// console.log(res);
				this.leiNmae = res.result;
			});
		},
		showdow() {
			if (this.show) {
				this.show = false;
				this.showone = false;
				this.showtwo = false;
			} else {
				this.show = true;
				this.showone = false;
				this.showtwo = false;
			}
		},
		showO() {
			this.showone = !this.showone;
			this.show = false;
			this.showtwo = false;
		},
		showTT() {
			this.showone = false;
			this.show = false;
			this.showtwo = !this.showtwo;
		},
		showAll(){
			this.$ajax('api/v2.goods/index',{
			    
			       }).then((res)=>{
			        // console.log(res);
					this.arry=res.result
					this.addy=res.result
			       }).catch(res=>{
			        console.log(Error);
			       })
		},
		// showdow() {
		// 	if (this.show) {
		// 		this.show = false;
		// 	} else {
		// 		this.show = true;
		// 	}
		// },

	showt(e) {
		this.showtwo = false;
		if (e == 0) {
			this.addy = this.arry;
			this.msy = '智能排序';
		}
		if (e == 1) {
			this.addy = this.arry;
			this.msy = '上架时间(最近)';
			function compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1; // value1-value2是从小到大    如果是从大到小 return value2 -value1
				};
			}
			this.arry.sort(compare('create_time'));
		}
		if (e == 2) {
			this.addy = this.arry;
			this.msy = '上架时间(最早)';
			console.log(this.arry);
			function compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2; // value1-value2是从小到大    如果是从大到小 return value2 -value1
				};
			}
			this.arry.sort(compare('create_time'));
		}
		if (e == 3) {
			console.log(this.arry);
			this.msy = '更新时间(最近)';
			this.addy = this.arry;
			this.msy = '上架时间(最早)';
			console.log(this.arry);
			function compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2; // value1-value2是从小到大    如果是从大到小 return value2 -value1
				};
			}
			this.arry.sort(compare('update_time'));
		}
		if (e == 4) {
			this.msy = '更新时间(最早)';
			console.log(this.arry);
			this.msy = '更新时间(最近)';
			this.addy = this.arry;
			this.msy = '上架时间(最早)';
			console.log(this.arry);
			function compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1; // value1-value2是从小到大    如果是从大到小 return value2 -value1
				};
			}
			this.arry.sort(compare('update_time'));
		}
		// if (e == 5) {
		// 	this.msy = '销售从高到低';
		// 	console.log(this.arry);
		// }
		// if (e == 6) {
		// 	this.msy = '销售从低到高';
		// 	this.type = e;
		// 	function compare(property) {
		// 		return function(a, b) {
		// 			var value1 = a[property];
		// 			var value2 = b[property];
		// 			return value1 - value2;
		// 		};
		// 		this.arry = this.arry.sort(compare(''));
		// 	}
		// }
		// if (e == 7) {
		// 	// console.log(this.arry);
	
		// 	this.msy = '库存从高到低';
	
		// }
		// if (e == 8) {
		// 	this.msy = '库存从低到高';
		// }
	},
	showOO(e) {
		
		this.arry = this.addy;
			if (e == 0) {
				this.mst = '全部';
				
			}
			if (e == 1) {
				this.mst = '低于安全库存';
			
				this.arry = this.arry.filter(item => {
					return item.aa == 1;
				});
			}
			if (e == 2) {
				this.mst = '高于安全库存';
				this.arry = this.arry.filter(item => {
					return item.aa == 2;
				});
			}
			this.showone = false;
		},
	showtrue(index, item) {
		if (index == -1) {
			this.arry = this.addy;
			this.msg = '全部分类';
			this.show = false;
			return;
		}
		this.arry = this.addy;
		this.show = false;
		this.msg = item.name;
		this.arry = this.arry.filter(item => {
			return item.category_name == this.msg;
		});
	},
		xiao(e){
			// console.log(e);
			let c=0
			e.product_list.forEach(item=>{
			c=+item.store_num+c
			})
			return c
		},
		sele(e){
			let c=0
			e.product_list.forEach(item=>{
			c=+item.sale_num+c
			})
			return c
		},
		// 调起扫码搜索
		scan(){
		let that=this
		uni.scanCode({
		    success: function (res) {
		       console.log(res.result);
			
				// console.log(this.pict);
			that.arry = that.addy;
				// this.pict=newValue
				that.arry = that.arry.filter(item => {
		
					
					return item.goods_no == res.result
				});
				// console.log(123);
		    }
		});
		},
			
		kk(e){
			let c=0
				let a =''
			e.product_list.forEach(item=>{
			c=+item.store_num+c
		
			// if(item.min_price<c){
			// a='库存过低'
			// }
			})
			if(e.min_stock_warn_num<+e<e.max_stock_warn_num){
			e.aa=0
			 a='安全库存'
			}
			if(+c<e.min_stock_warn_num){
			e.aa=1
			 a='库存过低'
			}
			
		
			if(+c>e.max_stock_warn_num){
				// console.log(123);
				e.aa=2
			 a='库存过高'
			}

			return a
		}
	}
};
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}
	.header {
		width: 100%;
		background-color: #249AF6;
		padding-top: 20upx;
		.header-b {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			justify-content: space-between;
			color: #ffffff;
			padding: 50rpx 30rpx 25rpx 30rpx;
			image {
				width: 21rpx;
				height: 38rpx;
			}
			.more {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
	
		.header-s {
			width: 143rpx;
			height: 34rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 48rpx;
		}
	}
	.seach {
		width: 100%;
		background-color: #249AF6;
		padding:0 30rpx 25rpx 30rpx;
		display: flex;
		box-sizing: border-box;
	align-items: center;
		
	image{
		margin-left: 30rpx;
	}
		.seach-s {
			// width: 700rpx;
			width: 90%;
			height: 60rpx;
			line-height: 60rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 99999rpx;
			padding-left: 27rpx;
			display: flex;
	
			box-sizing: border-box;
			input {
				font-size: 28upx;
				color: #999;
				border-style: none;
				height: 60rpx;
				line-height: 60rpx; 
			}
			image {
				width: 31rpx;
				height: 28rpx;
				margin-top: 15rpx;
				margin-right: 20rpx;
			}
		}
		.seach-e {
			image {
				width: 44rpx;
				height: 44rpx;
				margin-top: 12rpx;
				margin-left: 10rpx;
			}
		}
	}
	.classify {
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		height: 90rpx;
		line-height: 90rpx;
		background-color: #ffffff;
		border-bottom: 21rpx solid #f5f5f5;
		image {
			width: 17rpx;
			height: 10rpx;
			margin-left: 11rpx;
		}
	}
	.ima {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 227rpx;
		image {
			width: 370upx;
			height: 390upx;
		}
	}
	
	.combobox {
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 48rpx;
		padding-left: 30rpx;
		z-index: 2;
		.show-li {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 2rpx solid #eeeeee;
			image {
				width: 38rpx;
				height: 32rpx;
				margin: 50rpx;
				float: right;
			}
		}
	}
	.show {
		display: none;
	}
	.show-li:hover {
		color: #249af6;
	}
	.showtrue {
		display: none;
	}
	.stockList {
		.stock-item {
			background-color: $white-background;
			padding: 35upx 0;
			margin-bottom: 20upx;

			.title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 2upx #eee solid;
				padding: 0 30upx 20upx 30upx;

				&.red {
					color: #DB5646;
				}

				&.blue {
					color: #249AF6;
				}
			}

			.box {
				display: flex;
				flex-direction: row;
				margin-top: 20upx;
				padding: 0 30upx;

				.pic {
					image {
						width: 160upx;
						height: 160upx;
						margin-right: 35upx;
					}
				}

				.text {

					.name {
						margin-bottom: 10upx;
					}
				}
			}
		}
	}
</style>
